<!--  -->
<template>
  <div>维修
    <ELTable v-bind="tableConfig">
       <template #search="{params,searchSubmit}">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="关键字">
  <el-input v-model="params.key" placeholder="请输入关键字" clearable />
</el-form-item>
<el-form-item label="地址">
  <el-input v-model="params.address" placeholder="请输入地址" clearable />
</el-form-item>
<el-form-item label="电话">
  <el-input v-model="params.tel" placeholder="请输入电话" clearable />
</el-form-item>

<el-form-item label="账期">
  <!-- {{ params }} -->
  <el-date-picker @change="(e)=>dateChange(e,params)" v-model="dateValue" type="daterange" value-format="YYYY-MM-DD"
    format="YYYY-MM-DD" unlink-panels range-separator="至" start-placeholder="起始日期" end-placeholder="截止日期"
    :shortcuts="shortcuts" />

</el-form-item>
<el-form-item label="状态">
  <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态">
    <el-option label="已缴费" value="2" />
    <el-option label="未缴费" value="1" />
  </el-select>

</el-form-item>
 

<el-form-item label="类型">
  <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择类型">
    <el-option label="已缴费" value="2" />
    <el-option label="未缴费" value="1" />
  </el-select>

</el-form-item>


<el-form-item label="居民">
  <el-input v-model="params.userid" placeholder="请输入居民" clearable />
</el-form-item>

 

<el-form-item>
  <el-button type="primary" @click="searchSubmit">搜索</el-button>
</el-form-item>
</el-form>
       </template>

     <template #operate="{deleteHandle,scope}">
       <el-button @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
     </template>
    </ELTable>
  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted} from 'vue'
import ELTable,{TableType} from '../../components/ELTable.vue';
import { getList,del } from '../../service/repairs/repairs';
const imgBaseUrl=ref(import.meta.env.VITE_IMG_URL);
const tableConfig:TableType={
     loadData:getList,
     delete:del,
     columns:[
        {
            prop:"id",
            label:"id",
            attrs:{
                width:60
            }
        }
        ,{
            prop:"typename",
            label:"维修类型",
            attrs:{
                width:150
            }
        }
        ,{
            prop:"address",
            label:"维修地址"
        }
        ,{
            prop:"images",
            label:"图片",
            images:true
        }
        ,{
            prop:"content",
            label:"故障描述"
        }
        ,{
            prop:"addtime",
            label:"提交时间",
            timeFormat:"YYYY-MM-DD HH:mm",
            attrs:{
                width:180
            }
        }
        ,{
            prop:"statename",
            label:"状态",
            attrs:{
                width:80
            }
        }
        ,{
            prop:"operate",
            label:"操作",
            slot:true,
            attrs:{
                width:90
            }
        }
     ]
}

//日期选择器 选择事件
const dateChange = (e: any,params:any) => {

if (e != null) {

  params.begindate = e[0];
  params.enddate = e[1];


}
else {
  params.begindate = "";
  params.enddate = "";
}



}

const shortcuts = [
{
  text: '最近一周',
  value: () => {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
    return [start, end]
  },
},
{
  text: '最近一个月',
  value: () => {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    return [start, end]
  },
},
{
  text: '最近3个月',
  value: () => {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
    return [start, end]
  },
},
]

const dateValue = ref('')
</script>
<style scoped>
</style>